<template>
  <div class="GloudWarehouse">
    <h4>运维费模板</h4>
    <div class="cus-tabs-style">
      <div class="key-search clearfix">
        <div class="floatfix">
          <el-input
            v-model="keySearch"
            suffix-icon="el-icon-search"
            placeholder="输入关键词搜索"
          />
          <el-button type="primary" @click="handelSearch">确认</el-button>
          <el-button
            type="primary"
            @click="$router.push({ name: 'AddYWFTemplate' })"
          >添加模板</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        height="550"
        :data="Bindata"
        class="cus-table"
      >
        <el-table-column label="名称" prop="name" align="center" />
        <el-table-column label="模板类型" prop="type" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == '0'">售卖</span>
            <span v-if="scope.row.type == '1'">租赁</span>
          </template>
        </el-table-column>
        <el-table-column label="模板内容" align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.type == '0'"
              style="display: flex; flex-wrap: wrap;  justify-content: space-around; white-space: nowrap;"
            >
              <span>配货:￥{{ scope.row.distributionPrice }}</span>
              <span>配送:￥{{ scope.row.deliveryPrice }}</span>
              <span>维护:￥{{ scope.row.maintainPrice }}</span>
            </span>
            <span
              v-else
              style="display: flex; flex-wrap: wrap;  justify-content: space-around; white-space: nowrap;"
            >
              <span>配货:￥{{ scope.row.distributionPrice }}</span>
              <span>配送:￥{{ scope.row.deliveryPrice }}</span>
              <span>维护:￥{{ scope.row.maintainPrice }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="使用商品" prop="goodsCount" align="center" />
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <div class="operation">
              <el-button
                type="text"
                @click="handelCopy(scope.row)"
              >复制</el-button>
              <span style="margin:0px 10px">|</span>
              <el-button
                type="text"
                @click="handelEidt(scope.row)"
              >编辑</el-button>
              <span style="margin:0px 10px">|</span>
              <el-button
                type="text"
                style="color:red"
                @click="handelDel(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="float:right;margin-top:40px"
      :current-page="pages.page"
      :page-sizes="pages.pageSize"
      :page-size="pages.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { YWFTemplateList, YWFTemplateDel } from './api/YWFTemplate'
/** 运维费模板 */
export default {
  name: 'YWFTemplate',
  data() {
    return {
      loading: false,
      keySearch: '',
      activeModel: '1',
      Bindata: [],
      pages: {
        page: 1,
        limit: 20,
        pageSize: [20, 30, 40, 50],
        total: 0
      }
    }
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
  },
  methods: {
    handelEidt(row) {
      this.$router.push({
        name: 'AddYWFTemplate',
        params: { row: row, edit: true }
      })
    },
    handelDel(row) {
      this.$confirm('你确定要删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        YWFTemplateDel({ id: row.id }).then(() => {
          this.$message.success('成功删除')
          this.loadding()
        })
      })
    },
    /** 复制 */
    handelCopy(row) {
      this.$confirm('你要复制这条数据吗？', '提示', {
        type: 'info'
      }).then(() => {
        this.$router.push({
          name: 'AddYWFTemplate',
          params: { row: row, edit: false }
        })
      })
    },
    handelSearch() {
      this.loadding()
    },
    loadding() {
      this.loading = true
      YWFTemplateList({
        shopId: localStorage.getItem('shopId'),
        keySearch: this.keySearch,
        page: this.pages.page,
        limit: this.pages.limit
      })
        .then(result => {
          this.Bindata = result.data.data.data
          this.pages.total = result.data.data.total
          this.loading = false
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    handleTabClidk(tab) {
      console.log(tab)
    },
    handleSizeChange(limit) {
      this.pages.limit = limit
      this.loadding()
    },
    handleCurrentChange(pageIndex) {
      this.pages.page = pageIndex
      this.loadding()
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:after {
  content: '020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
.GloudWarehouse {
  padding: 50px 100px;
  .cus-tabs-style {
    .key-search {
      width: 100%;
      .floatfix {
        float: right;
        .el-input {
          width: 220px;
        }
      }
    }
    .cus-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cus-table {
      margin-top: 40px;
      .operation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0px auto;
      }
    }
  }
}
</style>
